<script>
export default {
  name: "HW_ftc",
  data() {
    return {
      //分页
      pageData: {
        page: 1,
        size: 5,
        name: null
      },
      tableData: [],
      total: 0,//总行数,用于分页计算
      dialogVisible: false,
      //弹窗标题
      tableTitle: "新增",
      addData: {
        id: null,
        picId2: null,
        name: null,
        address: null,
        longitude: null,
        latitude: null,
        cost: null,
        occupyArea: null,
        manHoleNum: null,
        womanHoleNum: null

      },//用于新增的数据绑定
      imageUrl: '',//头像回显示
    }
  },
  mounted() {//与method是同一级别的
    //组件加载触发该方法
    //发送请求获取数据
    this.geHw_ftcList();
    this.initMap();
  },
  methods: {//获取公测信息
    geHw_ftcList() {
      this.$http({url: "hw_ftc/selectPage", method: "GET", params: this.pageData}).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    //分页的两个方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //重新加载表格数据
      this.pageData.size = val;
      //重新调用数据加载方法
      this.geHw_ftcList()//用于改变没有的条数
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageData.page = val;
      //重新调用数据加载方法
      this.geHw_ftcList()//改变当前页面数
    },
    //新增弹窗
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //打开新增窗口
    addShow(res) {

      if (res) {
        //修改
        this.tableTitle = "修改"
        //将要修改的数据显示
        // this.addData.userId=res.userId
        // this.addData.userName=res.userName
        // this.addData.userPassword=res.userPassword
        // this.addData.userAccount=res.userAccount
        // this.addData.userImg=res.userImg
        // this.addData.userStatus=res.userStatus
        // //头像显示
        // this.imageUrl=res.userImg
        this.addData.id = res.id;
        this.addData.name = res.name;
        this.addData.cost = res.cost;
        this.imageUrl = res.imageUrl;
        this.addData.longitud=res.longitud;
        this.addData.address=res.address;
        this.addData.womanHoleNum=res.womanHoleNum;
        this.addData.manHoleNum=res.manHoleNum;
        this.addData.occupyArea=res.occupyArea
      } else {
        //新增
        this.tableTitle = "新增"
        this.addData.id = null;
        this.addData.name = null;
        this.addData.cost = null;
        this.imageUrl = null;
        this.addData.longitud=null;
        this.addData.address=null;
        this.addData.womanHoleNum=null;
        this.addData.manHoleNum=null;
        this.addData.occupyArea=null
      }
      this.dialogVisible = true

    },
    init() {
      //打开新增或者修改界面,地图显示,用监听器监听到资源加载完后再进行初始化
      this.initMap();
    },
    //图片上传
    handleAvatarSuccess(res, file) {
      console.log(res)
      //图头像回显
      this.imageUrl = "http://localhost:8888" + res.data;
      //把图片路径保存到数据库
      this.addData.picId2 = "http://localhost:8888" + res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //地图初始化
    initMap() {//地图是异步请求的操作 及其打开dialog的期间也在运行地图 所以地图数据未加载完全会报错
      let x, y;//经纬度
      let mk;//地图中的标记
      let map = new BMapGL.Map('container');//创建一个地图 在container里面创建
      //定位
      var geolocation = new BMapGL.Geolocation();//获取定位
      //发出请求获取自己定位的位置,result,返回自己当前的坐标
      geolocation.getCurrentPosition(function (result) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          if (mk) {
            mk.remove()//删除标记 mk是标记对象 有标记就删除标记
          }
          mk = new BMapGL.Marker(result.point);
          map.addOverlay(mk);//重新标记坐标
          map.panTo(result.point);
          x = result.point.lng//当前的精度
          y = result.point.lat//纬度
        } else {
          alert("定位失败！" + this.getStatus());

        }
      })
      map.centerAndZoom(new BMapGL.Point(x, y), 13);//在地图中显示当前坐标  13是缩放比例
      map.enableScrollWheelZoom(true);//缩放
      //地图添加点击事件 获取点击的坐标
      map.addEventListener('click', function (e) {
        x = e.latlng.lng
        y = e.latlng.lat
        document.getElementById("in1").value = x
        document.getElementById("in2").value = y//通过js的方式复制 因为与挂载的数据没有关联
        alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
        if (mk) {
          mk.remove()
        }
        mk = new BMapGL.Marker(e.latlng);
        map.addOverlay(mk);
        map.centerAndZoom(new BMapGL.Point(x, y), 13);
      });
    },
    add() {//新增
      if (this.tableTitle == "新增") {
        //input赋值
        this.addData.latitude=document.getElementById("in1").value //将值取出来
        this.addData.longitude=document.getElementById("in2").value //通过js的方式复制 因为与挂载的数据没有关联
        this.$http({url: "/hw_ftc/add", method: "post", data: this.addData}).then(res => {
          //提示
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          //先将数据清空 重置表单
          this.addData.picId2 = null
          this.addData.name = null
          this.addData.address = null
          this.addData.longitude = null
          this.addData.latitude = null
          this.addData.cost = null
          this.addData.occupyArea = null
          this.addData.manHoleNum = null
          this.addData.omanHoleNum = null
          //图片清空
          this.imageUrl = ""
          //关闭弹窗
          this.dialogVisible = false
          //数据重新加载
          this.geHw_ftcList()
        })
      } else {
        //修改
        this.addData.latitude=document.getElementById("in1").value //将值取出来
        this.addData.longitude=document.getElementById("in2").value //通过js的方式复制 因为与挂载的数据没有关联
        this.$http({url: "/hw_ftc/update", method: "post", data: this.addData}).then(res => {
          //提示
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          //先将数据清空 重置表单
          this.addData.picId2 = null
          this.addData.name = null
          this.addData.address = null
          this.addData.longitude = null
          this.addData.latitude = null
          this.addData.cost = null
          this.addData.occupyArea = null
          this.addData.manHoleNum = null
          this.addData.omanHoleNum = null
          //图片清空
          this.imageUrl = ""
          //关闭弹窗
          this.dialogVisible = false
          //数据重新加载geHw_ftcList
          this.geHw_ftcList()
        })
      }
    },
    deleteHw(row) {
      this.$http({url: "/hw_ftc/deleteHw", method: "DELETE", params: {"id": row.id}}).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          //刷新表格
          this.geHw_ftcList();
        } else {
          this.$message.error("删除失败")
        }
      })
    }
  }
}
</script>

<template>
<div class="background-container">
  <!--面包屑-->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>公厕列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-row style="margin-top: 20px;">
    <el-col :span="5">
      <el-input
        placeholder="输入公厕名称"
        prefix-icon="el-icon-search"
        v-model="pageData.name">
      </el-input>
    </el-col>
    <el-col :span="30" style="margin-left: 20px">
      <el-button type="primary" @click="geHw_ftcList()">查询</el-button>
      <el-button type="success" @click="addShow()" >新增</el-button>
      <!--   aadshow把提示框作为一个展示>-->
    </el-col>
  </el-row>
  <!--查询数据-->
  <el-table
    :data="tableData"
    style="width: 100%;margin-top: 20px" >
    <el-table-column
      type="index"
      label="序号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="公厕名称">
    </el-table-column>
    <el-table-column
      prop="address"
      label="公厕地址"
      width="180">
    </el-table-column>
    <el-table-column
      prop="picId2"
      label="实体照片">
    </el-table-column>
    <el-table-column
      prop="cost"
      label="造价">
    </el-table-column>
    <el-table-column
      prop="occupyArea"
      label="占地">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button  type="text" size="small" @click="addShow(scope.row)">修改</el-button>
        <el-button type="text" size="small" @click="deleteHw(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageData.page"
    :page-sizes="[5, 10, 15, 20]"
    :page-size="pageData.size"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
  <!--opened作用:监听打开全程后再去进行初始化-->
  <el-dialog
    :title="tableTitle"
    :visible.sync="dialogVisible"
    width="50%"
    @opened="init"
    :before-close="handleClose">
    <el-form ref="addform" :model="addData" label-width="80px">
      <el-form-item label="公厕照片">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8888/file/updata"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
     <el-row>
       <el-col :span="12"><!--先行在列就可以把多个组件放在一行上面了-->
         <el-form-item label="公厕名称">
           <el-input v-model="addData.name"></el-input>
         </el-form-item>
       </el-col>
       <el-col :span="12"><!--row 和 col可以用来进行布局设置 以行按道理就是24-->
         <el-form-item label="公厕地址">
           <el-input v-model="addData.address"></el-input>
         </el-form-item>
       </el-col>
     </el-row>
      <el-row>
        <el-col :span="12">
      <el-form-item label="公厕精度">
        <el-input v-model="addData.longitude" id="in1"></el-input>
      </el-form-item>
        </el-col>
        <el-col :span="12">
      <el-form-item label="公厕纬度">
        <el-input v-model="addData.latitude" id="in2"></el-input><!--给精度和纬度设置一个id 用于后续的值的输入-->
      </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div id="container"></div><!--建一个视图 地图显示-->
        </el-col>
      </el-row>
      <el-row>
            <el-col :span="6">
      <el-form-item label="造价:">
        <el-input v-model="addData.cost"></el-input>
      </el-form-item>
            </el-col>
              <el-col :span="6">
      <el-form-item label="占地面积:">
        <el-input v-model="addData.occupyArea"></el-input>
      </el-form-item>
              </el-col>
        <el-col :span="6">
          <el-form-item label="男蹲位数:">
            <el-input v-model="addData.manHoleNum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="margin-left: auto;">
          <el-form-item label="女蹲位数:" fixed="right">
            <el-input v-model="addData.womanHoleNum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="add">提 交</el-button>
  </span>
  </el-dialog>
</div>
</template>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.background-container {
  background-image: url('../assets/hw.jpg'); /* 替换为你的图片路径 */
  background-size: cover; /* 拉伸填充整个容器 */
  background-repeat: no-repeat;
  min-height: 100vh; /* 保证容器高度至少为视口高度 */
  padding: 20px; /* 可选：避免内容贴边 */
  box-sizing: border-box; /* 防止内边距影响宽度 */
}

/* 优化表格内容在背景上的可读性 */
.el-table {
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
}
#container {
  overflow: hidden;
  width: 500px;
  height: 300px;
  margin: 0;
  font-family: "微软雅黑";
}
</style>
